<template>
  <div class="login">
    <van-nav-bar
      @click-left="onClickLeft"
      left-text="返回"
      left-arrow
      :title='this.$route.meta[0].name'
    />
    <van-form
      validate-first
      @submit="login"
    >
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        required
        v-model="mobile"
        label="手机号:"
        placeholder="手机号"
        :rules="rules.mobile"
      />
      <!-- 通过 validator 进行函数校验 -->
      <van-field
        required
        v-model='code'
        label="验证码:"
        placeholder="24680"
        :rules="rules.code"
      />
      <div style="margin: 16px">
        <van-button
          :disabled='dis'
          round
          block
          type="info"
          native-type="submit"
        >登录</van-button>
        <van-loading
          vertical
          v-show="dis"
          type="spinner"
          color="#1989fa"
        />
      </div>
    </van-form>
  </div>
</template>

<script>
import { login } from '@/api/user.js'
export default {
  name: 'login',
  data () {
    return {
      dis: false,
      mobile: '18437675820',
      code: '246810',
      rules: {
        mobile: [
          {
            required: true,
            message: '手机号不能为空'
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机格式错误'
          }
        ],
        code: [
          {
            required: true,
            message: '必填'
          },
          {
            pattern: /246810/,
            message: '必须为246810'
          }
        ]
      }

    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
      console.log(123456789)
    },
    async login () {
      this.dis = true
      try {
        const res = await login(this.mobile, this.code)
        this.$store.commit('user/setToken', res.data.data)
        this.$router.push('/user')
        this.dis = false
        this.$toast('登录成功')
      } catch {
        this.dis = false
        this.$toast('登录失败')
      }
    }
  }
}
</script>

<style>
</style>
